<template>
  <Modal
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="同步"
  >
    <div class="modal-main" style="position: relative">
      <Spin :withIcon="true" v-if="loading"></Spin>

      <div v-if="info.isVerify === 1">
        <div v-if="info.email !== ''">
          <div  class="flx-row-s-c item-line">
            <div class="title-name">邮箱</div>
            <div>{{info.email}}</div>
          </div>
          <div class="flx-row-s-c item-line">
            <div class="title-name">邮箱验证码</div>
            <Input
                v-if="info.verifyCode === 1"
                v-model.trim="emailCode"
                type="email"
                placeholder="请输入"
                maxlength="6"
                style="width: 100px; margin-right: 10px"
            />
            <div
                class="user-normal-button small-code-button"
                :class="[ emailCodeAvailable ? 'user-normal-button' : 'forbid-button']"
                @click="getEmailCode"
            >
              {{ emailCodeContent }}
            </div>
          </div>
        </div>
        <div v-if="info.phone !== ''">
          <div class="flx-row-s-c item-line">
            <div class="title-name">手机</div>
            <div>{{ info.phone }}</div>
          </div>
          <div class="flx-row-s-c item-line">
            <div class="title-name">手机验证码</div>
            <Input
                v-if="info.verifyCode === 1"
                v-model.trim="phoneCode"
                type="email"
                placeholder="请输入"
                maxlength="6"
                style="width: 100px; margin-right: 10px"
            />
            <div
                class="user-normal-button small-code-button"
                :class="[ phoneCodeAvailable ? 'user-normal-button' : 'forbid-button']"
                @click="getPhoneCode"
            >
              {{ phoneCodeContent }}
            </div>
          </div>
        </div>
      </div>
      <div style="text-align: center" v-else>
        是否同步？
      </div>

      <div class="flx-row-c-c" style="margin-top: 30px">
        <div
          class="big-button-size user-strong-button"
          style="margin-right: 50px"
          @click="submit"
        >
          确认
        </div>
        <div class="big-button-size user-normal-button" @click="cancel">
          取消
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import { registrarSync,registrarEmailSend} from "@/api/user";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    info: {
        type:Object,
        default:() => {}
    },
    registrarId:{
        type:[Number,String],
        default:''
    },
    templateId:{
        type:[Number,String],
        default:''
    },
  },
  data() {
    return {
      loading: false,

      // 表单数据
      emailCode: "",
      phoneCode: '',
      // 邮箱可以获取验证码
      emailCodeAvailable: true,
      // 邮箱验证码按钮上的文字
      emailCodeContent: "获取验证码",
      // 邮箱获取验证码定时器
      emailCodeInterval: null,
      // 电话可以获取验证码
      phoneCodeAvailable: true,
      // 电话验证码按钮上的文字
      phoneCodeContent: "获取验证码",
      // 电话获取验证码定时器
      phoneCodeInterval: null,
    };
  },
  methods: {
    // 获取邮箱验证码
    async getEmailCode() {
      this.loading = true;
      let params = {
        type:2,
        registrarId:this.registrarId,
        templateId:this.templateId,
      };
      let res = await registrarEmailSend(params);
      if (res.code == 200) {
        this.emailCodeAvailable = false;
        let i = 60;
        this.emailCodeContent = `${i--}秒后再获取`;
        this.emailCodeInterval = setInterval(() => {
          if (i <= 1) {
            this.emailCodeContent = "获取验证码";
            this.emailCodeAvailable = true;
            clearInterval(this.emailCodeInterval);
            return;
          }
          this.emailCodeContent = `${i--}秒后再获取`;
        }, 1000);
        this.$Message.success("验证码已经发送，请注意查收！");
      } else {
        this.$Message.warning(res.message);
      }
      this.loading = false;
    },
    // 获取电话验证码
    async getPhoneCode() {
      this.loading = true;
      let params = {
        type:1,
        registrarId:this.registrarId,
        templateId:this.templateId,
      };
      let res = await registrarEmailSend(params);
      if (res.code == 200) {
        // this.code = res.data.vcode;
        this.phoneCodeAvailable = false;
        let i = 60;
        this.phoneCodeContent = `${i--}秒后再获取`;
        this.phoneCodeInterval = setInterval(() => {
          if (i <= 1) {
            this.phoneCodeContent = "获取验证码";
            this.phoneCodeAvailable = true;
            clearInterval(this.phoneCodeInterval);
            return;
          }
          this.phoneCodeContent = `${i--}秒后再获取`;
        }, 1000);
        this.$Message.success("验证码已经发送，请注意查收！");
      }
      this.loading = false;
    },
    // 提交表单
    async submit() {
      if(this.info.isVerify === 1 && this.info.verifyCode === 1){
        if(this.info.email){
          if (!this.emailCode) {
              this.$Message.warning("请输入邮箱验证码！");
              return;
          }
        }

        if(this.info.phone){
          if (!this.phoneCode) {
              this.$Message.warning("请输入手机验证码！");
              return;
          }
        }
        this.registrarSync()
      }else{
        this.registrarSync()
      }

    },
    cancel() {
      this.config = false;
      this.email = "";
    },
    // 同步
    async registrarSync(){
      this.loading = true
      const params = {
        emailCode:this.emailCode,
        phoneCode:this.phoneCode,
        registrarId:this.registrarId,
        templateId:this.templateId,
      }
      const res = await registrarSync(params);
      if (res.code === 200) {
        this.$Message.success("操作成功！");
        setTimeout(() => {
          this.$emit("success");
        }, 1000)
        this.cancel();
      } else {
        this.$Message.warning(res.message);
      }
      this.loading = false
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;

  .item-line {
    margin-bottom: 10px;
  }
  .title-name {
    text-align: right;
    width: 120px;
    margin-right: 30px;
    font-size: 14px;
    line-height: 32px;
    color: #000;
    &::after {
      content: ":";
    }
  }
}
</style>
